<template>
  <page class="messages-list-box">
    <page-header>
      <x-header :left-options="{backText: ''}">我的消息</x-header>
    </page-header>
    <page-content class="inner" :scroll="true" @refresh="refresh" @infinite="infinite">
      <loading v-if="empty" :loading="loading" :empty="empty"></loading>
      <div v-else>
        <card v-for="item in messages" :key="item.id" @click.native="handleCardClick(item)">
          <card-header>
            <span slot="title">{{item.msgDetail.title}}</span>
            <span slot="text">{{item.createDate | format('YYYY.MM.DD HH:MM:ss')}}</span>
          </card-header>
          <card-content>
            {{item.msgDetail.content}}
          </card-content>
          <card-footer>
            <span slot="title">{{'点击查看'}}</span>
          </card-footer>
        </card>
      </div>
    </page-content>
  </page>
</template>


<script>
import { mapGetters } from 'vuex'
import { XHeader } from 'vux'
import { msgDetail } from '@service'

export default {
  name: 'Message',
  components: {
    XHeader
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/info',
      token: 'user/token'
    }),
    empty () {
      return this.messages.length === 0
    }
  },
  data () {
    return {
      messages: [],
      loading: false
    }
  },
  methods: {
    async loadData () {
      let token = this.token
      let userId = this.userInfo.id
      let page = this.page
      let data
      try {
        this.loading = true
        data = await msgDetail.list({userId, token, ...page})
        this.messages = data.list || []
        console.log(this.messages)
        this.loading = false
      } catch (error) {
        console.log(error)
        this.loading = false
      }
    },
    refresh () {
      this.loadData()
    },
    infinite () {
      this.loadData()
    },
    handleCardClick (item) {
      this.$router.push('/message/' + item.id)
    }
  },
  created () {
    this.loadData()
  }
}
</script>

<style lang="scss">
  .messages-list-box {
    .card {
      .card-header {
        .card-header__icon i {
          display: none;
        }
      }
    }
  }
</style>
